<template>
  <div class="detail">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="登录账户设置" name="first">
          <el-form
            :data="usermsg"
            ref="ruleForm"
            label-width="60px"
            style="width:400px"
            class="demo-ruleForm"
          >
            <el-form-item label="姓名">
              <el-input v-model="usermsg.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input type="password" v-model="usermsg.password"></el-input
            ></el-form-item>
            <el-button type="primary" @click="updateUserInfo">提交</el-button>
            <el-button>取消</el-button>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个人详情" name="second">
          <component :is="userInfo"></component>
        </el-tab-pane>
        <el-tab-pane label="岗位信息" name="third">
          <component :is="jobInfo"></component
        ></el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import jobInfo from './components/job-info.vue'
import userInfo from './components/user-info.vue'
import { getMoreUserInfo, updateUserInfo } from '@/api/user/'
export default {
  name: 'detatls',
  components: {
    jobInfo,
    userInfo
  },
  data () {
    return {
      jobInfo,
      userInfo,
      activeName: 'first',
      usermsg: {}
    }
  },
  created () {
    this.getMoreUserInfo()
  },
  methods: {
    async getMoreUserInfo () {
      let res = await getMoreUserInfo(this.$route.params.id)
      this.usermsg = res.data
    },
    // 提交更新
    async updateUserInfo () {
      let res = await updateUserInfo(this.usermsg)
      // 提示更新成
      this.$message.success('更新成功')
      // 跳转回employees页面
      this.$router.back()
      // console.log(res)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  margin: 18px;
  .el-tab-pane {
    display: flex;
    justify-content: center;
  }
}
</style>
